<template>
  <div class="page-container">
    <el-card shadow="none">
      <el-form inline>
        <el-form-item label="时间范围：">
          <el-date-picker
            v-model="searchParams.timeValue"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>

        <el-form-item label-width="20px" style="float: right">
          <el-button type="primary" icon="el-icon-document">导出</el-button>
        </el-form-item>
      </el-form>

      <div class="table-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column type="index" width="80px" label="序号" align="center" />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogEdit(scope.row)"
              >查看</el-button>
              <el-button
                type="text"
                @click="dialogEdit(scope.row)"
              >导出</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
export default {
  mixins: [crud],
  data() {
    return {
      searchParams: {
        timeValue: []
      },
      tableData: [
        {}, {}, {}
      ],
      columns: [
        { prop: '数据提供部门/区', label: '数据提供部门/区', width: '', minWidth: '' },
        { prop: '数据名称', label: '数据名称', width: '', minWidth: '' },
        { prop: '类型', label: '类型', width: '', minWidth: '' },
        { prop: '发布时间', label: '发布时间', width: '', minWidth: '' },
        { prop: '更新频率', label: '更新频率 ', width: '', minWidth: '' },
        { prop: '获取/调用次数', label: '获取/调用次数 ', width: '', minWidth: '' }
      ]
    }
  }
}
</script>

<style lang="scss">
.page-container {
  height: 100%;
}
</style>
